<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <base target="_parent" />
   <title>RetroArch Web Player</title>
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <!-- Bootstrap core CSS -->
   <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" rel="stylesheet" type="text/css">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.0/css/font-awesome.min.css">
    <!-- Material Design Bootstrap -->
    <link href="//cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.1.1/css/mdb.min.css" rel="stylesheet">   
   <link href="embed.css" rel="stylesheet" type="text/css">
   <link rel="shortcut icon" href="media/retroarch.ico" />
</head>
<body>   
   <!--Navbar-->
   <nav class="navbar navbar-dark bg-warning">
       <div class="container">
           <!--Collapse content-->
           <div class="collapse navbar-toggleable-xs" id="collapseEx2">
               <!--Links-->
               <ul class="nav navbar-nav">
                  <div class="dropdown">
                   <li class="nav-item dropdown">
                       <button class="btn btn-warning dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Core Selection</button>
                       <div class="dropdown-menu dropdown-warning" aria-labelledby="dropdownMenu1" data-dropdown-in="fadeIn" data-dropdown-out="fadeOut" id="core-selector">
                          <a class="dropdown-item" href="." data-core="2048">2048</a>
                          <a class="dropdown-item" href="." data-core="4do">4DO</a>
                          <a class="dropdown-item" href="." data-core="bluemsx">BlueMSX</a>
                          <a class="dropdown-item" href="." data-core="craft">Craft</a>
                          <a class="dropdown-item" href="." data-core="desmume">DeSmuME</a>
                          <a class="dropdown-item" href="." data-core="dosbox">DOSBox</a>
                          <a class="dropdown-item" href="." data-core="easyrpg">EasyRPG</a>
                          <a class="dropdown-item" href="." data-core="fbalpha2012">FB Alpha 2012</a>
                          <a class="dropdown-item" href="." data-core="fbalpha2012_cps1">FB Alpha 2012 CPS1</a>
                          <a class="dropdown-item" href="." data-core="fbalpha2012_cps2">FB Alpha 2012 CPS2</a>
                          <a class="dropdown-item" href="." data-core="fbalpha2012_neo">FB Alpha 2012 NeoGeo</a>
                          <a class="dropdown-item" href="." data-core="fceumm">FCEUmm</a>
                          <a class="dropdown-item" href="." data-core="ffmpeg">FFmpeg</a>
                          <a class="dropdown-item" href="." data-core="gambatte">Gambatte</a>
                          <a class="dropdown-item" href="." data-core="glupen64">GLupeN64</a>
                          <a class="dropdown-item" href="." data-core="genesis_plus_gx">Genesis Plus GX</a>
                          <a class="dropdown-item" href="." data-core="gme">Game Music Emu</a>
                          <a class="dropdown-item" href="." data-core="gpsp">gPSP</a>
                          <a class="dropdown-item" href="." data-core="handy">Handy</a>
                          <a class="dropdown-item" href="." data-core="mame2000">MAME 2000</a>
                          <a class="dropdown-item" href="." data-core="mednafen_lynx">Mednafen Lynx</a>
                          <a class="dropdown-item" href="." data-core="mednafen_ngp">Mednafen Neo Geo Pocket</a>
                          <a class="dropdown-item" href="." data-core="mednafen_pce_fast">Mednafen PC Engine Fast</a>
                          <a class="dropdown-item" href="." data-core="mednafen_pcfx">Mednafen/Beetle PCFX</a>
                          <a class="dropdown-item" href="." data-core="mednafen_psx">Mednafen/Beetle PSX</a>
                          <!--<a class="dropdown-item" href="." data-core="mednafen_saturn">Mednafen/Beetle Saturn</a>-->
                          <a class="dropdown-item" href="." data-core="mednafen_snes">Mednafen/Beetle SNES</a>
                          <a class="dropdown-item" href="." data-core="mednafen_vb">Mednafen/Beetle Virtual Boy</a>
                          <a class="dropdown-item" href="." data-core="mednafen_wswan">Mednafen/Beetle WonderSwan</a>
                          <a class="dropdown-item" href="." data-core="mupen64plus">Mupen64 Plus</a>
                          <a class="dropdown-item" href="." data-core="nestopia">Nestopia</a>
                          <a class="dropdown-item" href="." data-core="nxengine">NX Engine</a>
                          <a class="dropdown-item" href="." data-core="o2em">O2em</a>
                          <a class="dropdown-item" href="." data-core="picodrive">PicoDrive</a>
                          <a class="dropdown-item" href="." data-core="prboom">PrBoom</a>
                          <a class="dropdown-item" href="." data-core="quicknes">QuickNES</a>
                          <a class="dropdown-item" href="." data-core="snes9x2002">Snes9x 2002</a>
                          <a class="dropdown-item" href="." data-core="snes9x2005">Snes9x 2005</a>
                          <a class="dropdown-item" href="." data-core="snes9x2010">Snes9x 2010</a>
                          <a class="dropdown-item" href="." data-core="snes9x">Snes9x</a>
                          <a class="dropdown-item" href="." data-core="stella">Stella</a>
                          <a class="dropdown-item" href="." data-core="tgbdual">TGB Dual</a>
                          <a class="dropdown-item" href="." data-core="tyrquake">TyrQuake</a>
                          <a class="dropdown-item" href="." data-core="vba_next">VBA Next</a>
                          <a class="dropdown-item" href="." data-core="vecx">Vecx</a>
                          <a class="dropdown-item" href="." data-core="virtualjaguar">Virtual Jaguar</a>
                          <a class="dropdown-item" href="." data-core="yabause">Yabause</a>
                       </div>

                      <button class="btn btn-warning disabled" id="btnRun" onclick="startRetroArch()" disabled>
                         <span class="fa fa-spinner fa-spin" id="icnRun"></span> Run
                      </button>
                      <button class="btn btn-warning disabled" id="btnAdd" onclick="document.getElementById('btnRom').click()" disabled>
                         <span class="fa fa-plus" id="icnAdd"></span> Add Content
                      </button>
                      <button class="btn btn-warning" id="btnClean" onclick="cleanupStorage();" title="Cleanup">
                        <span class="fa fa-trash-o" id="icnClean"></span> <span class="sr-only">Cleanup</span>
                      </button>
                      <input class="btn btn-warning disabled" style="display: none" type="file" id="btnRom" name="upload" onclick="document.getElementById('btnAdd').click();" onchange="selectFiles(event.target.files)" multiple />
                      <button class="btn btn-warning disabled" id="btnFullscreen" onclick="Module.requestFullScreen()" title="Fullscreen" disabled>
                         <span class="fa fa-desktop" id="icnAdd"></span> <span class="sr-only">Fullscreen</span>
                      </button>
                      <button class="btn btn-warning disabled" id="btnMenu" onclick="keyPress(112);" title="Menu toggle" disabled>
                        <span class="fa fa-bars" id="btnMenu"></span> <span class="sr-only">Menu</span>
                      </button>
                   </li>
                </div>
               </ul>
           </div>
           <!--/.Collapse content-->
       </div>
   </nav>
   <div class="bg-inverse webplayer-container">
      <div class="container">
         <div class="webplayer_border text-xs-center" id="canvas_div">
            <canvas class="webplayer col-xs-12" id="canvas" tabindex="1" oncontextmenu="event.preventDefault()" style="display: none"></canvas>
            <img class="webplayer-preview img-fluid" src="media/canvas.png" width="960px" height="720px" alt="RetroArch Logo">
         </div>
      </div>
   </div>
   <div class="container">
      <div class="row">
         <div class="col-sm-12 form-group btn-group text-xs-center p-t-2">
            <div class="btn-group" data-toggle="buttons">
               <label class="btn btn-warning" id="lblLocal" onclick=switchStorage("browser")>
                  <input type="radio" name="options" id="btnLocal" autocomplete="off" checked>
                     <span class="fa fa-globe" id="icnLocal"></span> Browser
                  </input>
                 </label>
               <!--uncomment for dropbox support
               <label class="btn btn-warning" id="lblDrop" onclick=switchStorage("dropbox")>
                  <input type="radio" name="options" id="btnDrop" autocomplete="off">
                     <span class="fa fa-dropbox" id="icnDrop"></span> Dropbox
                  </input>
               </label>-->
            </div>
         </div>
      </div>
      <div class="row">
         <div class="col-sm-12 form-group btn-group text-xs-center p-t-2">
            <div class="card">
                <div class="view overlay hm-white-slight" align="center">
                     <textarea id="output" rows="15"></textarea>
                </div>
            </div>

         </div>
      </div>
   </div>
   <div align="center">
      <p>For now, we recommend you use <a href="https://www.google.com/chrome/">Google Chrome</a> for the best possible performance.</p>
      <a href="http://www.libretro.com"><img align="center" src="media/libretro-logo.png" /></a>
   </div>

   <script src="//code.jquery.com/jquery-3.1.0.min.js"></script>
   <script src="//rawgit.com/jeresig/jquery.hotkeys/master/jquery.hotkeys.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/tether/1.3.4/js/tether.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.3/js/bootstrap.min.js"></script>
   <script src="//cdnjs.cloudflare.com/ajax/libs/dropbox.js/0.10.2/dropbox.min.js"></script>
   <!--script src="//wzrd.in/standalone/browserfs@0.6.1"></script-->
   <script src="//bot.libretro.com/web/browserfs.min.js"></script>
   <script src="embed.js"></script>
</body>
</html>
